<template>
  <div id="carousel-example-class" class="carousel slide" data-ride="carousel">
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="../../assets/images/Emblems/1.webp" alt="...">
        <div class="carousel-caption" >
          第1届
        </div>
      </div>
        <div class="item" v-for="(url,indexw) in urls">
          <img :src="url.url" alt="...">
          <div class="carousel-caption">
            第{{indexw+2}}届
          </div>
        </div>
      </div>
    <a class="left carousel-control" href="#carousel-example-class" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Previous</span>
    </a>
    <a class="right carousel-control" href="#carousel-example-class" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">Next</span>
    </a>
  </div>
</template>

<script>
export default {
  name: "LeftPicture",
  data(){
    return{
      urls:[

        {url:require("../../assets/images/Emblems/2.webp")},

        {url:require("../../assets/images/Emblems/3.webp")},

        {url:require("../../assets/images/Emblems/4.webp")},

        {url:require("../../assets/images/Emblems/5.webp")},

        {url:require("../../assets/images/Emblems/6.webp")},

        {url:require("../../assets/images/Emblems/7.webp")},

        {url:require("../../assets/images/Emblems/8.webp")},

        {url:require("../../assets/images/Emblems/9.webp")},

        {url:require("../../assets/images/Emblems/10.webp")},

        {url:require("../../assets/images/Emblems/11.webp")},

        {url:require("../../assets/images/Emblems/12.webp")},

        {url:require("../../assets/images/Emblems/13.webp")},

        {url:require("../../assets/images/Emblems/14.webp")},

        {url:require("../../assets/images/Emblems/15.webp")},

        {url:require("../../assets/images/Emblems/16.webp")},

        {url:require("../../assets/images/Emblems/17.webp")},

        {url:require("../../assets/images/Emblems/18.webp")},

        {url:require("../../assets/images/Emblems/19.webp")},
      ]

    }

  }

}
</script>

<style scoped>
/*.carousel {*/
/*  width:100%; !* Or try to use important *!*/
/*  height:auto;*/
/*}*/

</style>
